<template>
  <div>
    <tableComponents
      :pagination="{currentPage,pageSize,total:list.all_num}"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      @sendUserSearch="getSearch"
      :searchData="userSearchData"
      :isHaveExport="false"
      @toAdd="showAdd"
    >
      <template v-slot:table>
        <el-table
          ref="multipleTable"
          :data="list.data"
          v-loading="loading"
          header-row-class-name="head_color"
          stripe
          tooltip-effect="dark"
          style="width: 99.9%"
        >
          <el-table-column label="推广位名称" min-width="130">
            <template slot-scope="scope" style="vertical-align: text-top;">{{scope.row.pid_name}}</template>
          </el-table-column>

          <el-table-column label="分类标题" min-width="80">
            <template slot-scope="scope" style="vertical-align: text-top;">{{scope.row.title}}</template>
          </el-table-column>

          <el-table-column label="图标" min-width="70">
            <template slot-scope="scope">
              <div class="img_bor">
                <img :src="$fnc.getImgUrl(scope.row.piclink)" alt />
              </div>
            </template>
          </el-table-column>

          <el-table-column label="是否默认" min-width="130">
            <template
              slot-scope="scope"
              style="vertical-align: text-top;"
            >{{scope.row.is_default==1?'是':'否'}}</template>
          </el-table-column>

          <el-table-column label="创建时间" min-width="130">
            <template
              slot-scope="scope"
              style="vertical-align: text-top;"
            >{{scope.row.created_time | getTimeFormat}}</template>
          </el-table-column>

          <el-table-column label="操作" min-width="100">
            <template slot-scope="scope">
              <el-button
                :loading="$store.state.isLoading"
                size="mini"
                @click="setDefault(scope.row.id)"
                type="success"
                :disabled="scope.row.is_default==1"
              >设为默认</el-button>
              <el-button
                :loading="$store.state.isLoading"
                size="mini"
                @click="editInfo(scope.row)"
                type="primary"
              >编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template v-slot:footerLeft>
        <a class="aBtn aBtn_1 aBtn_lan2" @click="updata">更新</a>
      </template>
    </tableComponents>

    <el-dialog
      :title="title+'推广位'"
      :append-to-body="true"
      @close="show_promote = false"
      :visible.sync="show_promote"
      width="800px"
      class="tl size_13">
      <el-form :model="pidObj" label-width="120px">
        <el-form-item label="推广位名称" prop="pid_name">
          <el-col :span="12">
            <el-input v-model="pidObj.pid_name" size="small" :disabled="title == '编辑'"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="分类标题" prop="title">
          <el-col :span="12">
            <el-input v-model="pidObj.title" size="small"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="图片地址" prop="piclink">
          <el-col :span="12" class="tl">
            <el-input v-model="pidObj.piclink" autocomplete="off" disabled clearable class="mar_bottom_5"></el-input>
            <uploadpic
              :piclink="pidObj.piclink"
              :width="80"
              :height="80"
              :real_width="80"
              :real_height="80"
              :is_more="false"
              @send_pic="onSuccess"
            ></uploadpic>
          </el-col>
        </el-form-item>

        <el-form-item label="是否默认" prop="is_default">
          <el-col :span="12">
            <el-radio v-model="pidObj.is_default" label="1">是</el-radio>
            <el-radio v-model="pidObj.is_default" label="0">否</el-radio>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button
            :loading="$store.state.isLoading"
            type="primary"
            @click="addPromote"
            size="mini"
          >保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import uploadpic from "@/components/page/pic/up_pic";
import { ddkPromoteSearchData } from "../../assets/js/searchData/searchData"; //引入搜索的数据
export default {
  components: {
    uploadpic
  },
  props: [],
  data() {
    return {
      userSearchData: ddkPromoteSearchData,
      loading: false,
      show_promote: false,
      list: [],
      pageSize: 10,
      currentPage: 1,
      searchObj: [],
      pidObj: {
        pid_name: "",
        is_default: "1",
        piclink: "",
        title: ""
      },
      title: "添加"
    };
  },
  methods: {
    onSuccess(pic) {
      this.pidObj.piclink = pic;
    },
    editInfo(val) {
      this.pidObj = val;
      this.title = "编辑";
      this.show_promote = true;
    },
    updata() {
      this.$api.getShops.ddk_promote_update_lists({}).then(res => {
        if (res.data.code == 200) {
          this.$swal("更新成功！", "", "success");
        }
        this.get_data();
      });
    },
    setDefault(id) {
      this.$api.getShops.ddk_promote_defaults({ id: id }).then(res => {
        if (res.data.code == 200) {
          this.$swal("修改成功！", "", "success");
        }
        this.get_data();
      });
    },
    showAdd() {
      this.pidObj = { pid_name: "", is_default: "1", piclink: "", title: "" };
      this.title = "添加";
      this.show_promote = true;
    },
    addPromote() {
      if (this.pidObj.id) {
        this.$api.getShops.ddk_promote_saveedit(this.pidObj).then(res => {
          if (res.data.code == 200) {
            this.$swal("修改成功！", "", "success");
            this.show_promote = false;
            this.get_data();
          } else {
            this.$swal("修改失败！", res.data.result, "error");
          }
        });
      } else {
        this.$api.getShops.ddk_promote_saveadd(this.pidObj).then(res => {
          if (res.data.code == 200) {
            this.$swal("添加成功！", "", "success");
            this.show_promote = false;
            this.get_data();
          } else {
            this.$swal("添加失败！", res.data.result, "error");
          }
        });
      }
    },
    getSearch(val) {
      this.searchObj = val;
      this.get_data();
    },
    get_data(page, page_size) {
      this.loading = true;
      var data = this.searchObj;
      data.page = page || 1;
      data.page_size = page_size || this.pageSize;
      this.$api.getShops.ddk_promote_lists(data).then(res => {
        if (res.data.code == 200) {
          this.list = res.data.result;
          this.currentPage = page;
        }
        this.loading = false;
      });
    },
    handleSizeChange(val) {
      this.get_data("", val);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
       this.currentPage = val;
      this.get_data(val, this.pageSize);
    }
  },
  created() {
    this.get_data();
  },
  computed: {},
  watch: {}
};
</script>
